<template>
  <div class="greetings">
    <div>
      <span
        @click="spanClick(age, $event)"
        style="font-size: 20px; color: blueviolet; margin-right: 20px"
        >我是hello的子组件</span
      >
      <span>姓名：{{ name }} {{ message }}</span>
      <button style="margin-left: 10px" @click="change">改名改年龄</button>
      <!-- <span>ref定义:{{ people.hobby }}</span> -->
      <span style="margin-left: 10px">shallowRef定义：{{ people2.hobby }}</span>
      <button style="margin-left: 10px" @click="change1">改爱好</button>
      <span style="margin-left: 30px">年龄：{{ age }}</span>
      <button style="margin-left: 10px" @click="getChild(name)">给父亲发送值1</button>
      <button style="margin-left: 10px" @click="emit('haha', '给父亲的东西2')">
        给父亲发送值2
      </button>
    </div>
  </div>
</template>

<script setup lang="ts" name="Hello_child">
import usePerson from '@/hooks/usePerson'
import { reactive, ref, shallowRef, toRaw } from 'vue'

function spanClick(a: any, b: any) {
  a + b
}
//使用hooks进行模块化开发
const { name, age, change } = usePerson()

let people0 = ref({
  hobby: '吃饭'
})
let people1 = reactive({
  hobby: '吃饭'
})
let people2 = shallowRef({
  hobby: '吃饭'
})

const change1 = () => {
  people2.value.hobby = '睡觉'

  let p0 = toRaw(people0)
  let p1 = toRaw(people1)
  console.log('获取原始数据po', p0) //toRaw对于ref定义的响应式数据是不生效的
  console.log('获取原始数据p1', p1) //toRaw对于reactive定义的响应式数据才生效
}

//第一种数组形式
defineProps(['message', 'getChild'])
const emit = defineEmits(['haha'])

//可以在click时间中直接调用emit
// const senData = () => {
//   emit('haha', '给父亲的东西')
// }

//第二种对象形式
// defineProps({
//   message: {
//     type: String,
//     default: '不开心'
//   },
//   getChild: {}
// })

defineExpose({
  name,
  age
})
</script>

<style scoped></style>
